<template>
  <!--  如果if不存在，不展示信息-->
  <div v-if="user">
    <van-cell title="头像" is-link>
      <!--    展示头像-->
      <img :src="user.avatarUrl" alt="" style="height: 46px">
    </van-cell>
    <!--click是点击箭头跳转事件-->
    <van-cell title="昵称" is-link :value="user.username" @click="toEdit('username',
user.username, '昵称')"/>
    <van-cell title="账号" :value="user.userAccount"/>
    <van-cell title="性别" is-link :value="user.gender" @click="toEdit('gender',
user.gender, '性别')"/>
    <van-cell title="所在院校" is-link :value="user.school" @click="toEdit('school',
user.school, '所在院校')"/>
    <van-cell title="电话" is-link :value="user.phone" @click="toEdit('phone', user.phone,
'电话')"/>
    <van-cell title="邮箱" is-link :value="user.email" @click="toEdit('email', user.email,
'邮箱')"/>
    <van-cell title="账号注册时间" :value="user.createTime"/>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";

import {useRouter} from "vue-router";
import myAxios from "../plugins/myAxios.ts";
import {showSuccessToast, showFailToast} from "vant";
import {getCurrentUser} from "../services/user";


// 定义用户的模拟对象 user
// const user = ref({
//   id: 1,
//   username: 'yulian174',
//   userAccount: 'yulian174',
//   gender: '男',
//   school: '广东东软学院',
//   phone: '13075294785',
//   email: '703453506@qq.com',
//   // 控制宽高
//   avatarUrl: 'https://img2.baidu.com/it/u=1790834130,1952230725&fm=253&fmt=auto&app=138&f=JPEG?w = 500 & h = 500',
//   // toDateString() 会返回表示日期的字符串
//   createTime: new Date().toLocaleString(),
// })

//默认为空对象
const user = ref();
//页面首次加载时触发的钩子函数
onMounted(async () => {
  //页面首次加载时获取当前用户信息
  const res = await myAxios.get('/user/current');
  // if (res.code === 0) {
  //   user.value = res.data;
  //   showSuccessToast('获取用户信息成功！');
  // } else {
  //   showFailToast('获取用户信息失败');
  // }

  user.value = await getCurrentUser();
  if (res.data) {
    user.value = res.data;
    showSuccessToast('获取用户信息成功！');
  } else {
    showFailToast('获取用户信息失败');
  }
})

const router = useRouter();
const toEdit = (editKey: string, currentValue: string, editName: string) => {
  router.push({
    // 跳转到修改内容的页面
    path: '/user/edit',
    // query 是从 search 部分提取的已解码查询参数的字典
    query: {
      editKey, //要编辑的项
      currentValue, //当前的值
      editName
    }
  })
}
</script>

<style scoped>

</style>
